<template>
	<view class="annualCycle cycle">
		<view class="swiper-bg">
			<year-calendar />
		</view>
		<view class="swiper-box">
			<view class="top flex-r s-b">
				<view class="title">
					<view>
						2025<text>年</text>
					</view>
					<text>2025年1月23日 22:34:59</text>
				</view>
				<view class="map flex-r a-c">
					<text class="iconfont icon-taiyang" />
					<text>太阳回归图</text>
					<text class="iconfont zuo icon-zuozuo" />
				</view>
			</view>
			<view class="unlock flex-r s-b a-c mt-2">
				<text>
					年度报告解锁
				</text>
				<view class="flex-r a-c">
					查看示例
					<text class="iconfont icon-zuozuo" />
				</view>
			</view>
			<view class="content">
				<view class="tips mb-1">
					新的年度主题、挑战、目标设定、机遇。
				</view>
				<text>太阳回归在人类图中的应用，给了我们一个非常具体的年度能量蓝图，帮助我们理解每一年的能量周期和主题。它不仅是一个天文事件，也是自我发现和个人成长的一个重要工具。</text>
			</view>
			<view class="flex-c j-c a-c">
				<button class="video-btn flex-r a-c"><text class="iconfont icon-shipinbofang" />视频教程</button>
				<button class="unlock-btn mt-2">立即解锁</button>
			</view>
		</view>
		<view class="pl-2 pr-2">
			<button class="consult-btn">找咨询师1对1在线专业咨询</button>
		</view>
	</view>
</template>

<script setup>
	import yearCalendar from './yearCalendar.vue'
</script>

<style lang="scss" scoped>
	.annualCycle {}
</style>